<template>
  <div class='deploy'>
    <div class="header">
      <span>部 署</span>
    </div>
    <el-steps :active="stepsActive" align-center process-status='success' finish-status='success'>
      <el-step title="配置安装信息"></el-step>
      <el-step title="确认安装信息"></el-step>
      <!-- <el-step title="容器停止"></el-step>
      <el-step title="容器卸载"></el-step> -->
      <el-step title="容器下载"></el-step>
      <el-step title="容器安装"></el-step>
      <el-step title="容器启动"></el-step>
    </el-steps>
    <!-- 配置安装信息 -->
    <configInstallInfo v-show="stepsActive == 0" />
    <!-- 确认安装信息 -->
    <confirmInstallInfo v-show="stepsActive == 1" />
    <!-- 容器停止 -->
    <!-- <containerStop v-show="stepsActive == 2" /> -->
    <!-- 容器卸载 -->
    <!-- <containerUnloading v-show="stepsActive == 3" /> -->
    <!-- 容器下载 -->
    <containerDownload v-show="stepsActive == 2" />
    <!-- 容器安装 -->
    <containerInstall v-show="stepsActive == 3" />
    <!-- 容器启动 -->
    <containerStart v-show="stepsActive == 4" />
  </div>
</template>
<script>
import configInstallInfo from "./deploy/configInstallInfo";
import confirmInstallInfo from "./deploy/confirmInstallInfo";
import containerStop from "./deploy/containerStop";
import containerUnloading from "./deploy/containerUnloading";
import containerDownload from "./deploy/containerDownload";
import containerInstall from "./deploy/containerInstall";
import containerStart from "./deploy/containerStart";

import storage from "@/utils/storage";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { configInstallInfo, confirmInstallInfo, containerStop, containerUnloading, containerDownload, containerInstall, containerStart },
  data() {
    //这里存放数据
    return {
      stepsActive: 0
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() { },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    var isInit = storage.getItem('isInit')//通过isInit 判断是从容器商店跳转过来还是从我的容器跳转过来
    let steps = localStorage.getItem('stepsActive')
    if (isInit && !steps) {
      this.$nextTick(() => {
        var row = storage.getItem('containerShopRow')//获取从我的容器页面拿过来的数据
        console.log(row, 'isInit');
        switch (row.taskNode) {
          // case 'stop':
          //   this.stepsActive = 2
          //   this.$bus.$emit('toStop', row.id)//往容器停止组件传值
          //   break;
          // case 'uninstall':
          //   this.stepsActive = 3
          //   this.$bus.$emit('toUnloading', row.id)//往容器卸载组件传值
          //   break;
          case 'download':
            this.stepsActive = 2
            this.$bus.$emit('toDownload', row.id)//往容器下载组件传值
            break;
          case 'install':
            this.stepsActive = 3
            this.$bus.$emit('toFixInstall', row.id)//往容器安装组件传值
            break;
          case 'start':
            this.stepsActive = 4
            this.$bus.$emit('toStart', row.id)//往容器启动组件传值
            break;
        }
        // localStorage.setItem('stepsActive', this.stepsActive)
      })
    } else {
      if (steps) {
        let row = JSON.parse(localStorage.getItem('containerRow')) ?JSON.parse(localStorage.getItem('containerRow')) : { taskNode:'' }
        switch (row.taskNode) {
          case 'download':
            this.stepsActive = 2
            this.$bus.$emit('toDownload', row.id)//往容器下载组件传值
            break;
          case 'install':
            this.stepsActive = 3
            this.$bus.$emit('toFixInstall', row.id)//往容器安装组件传值
            break;
          case 'start':
            this.stepsActive = 4
            this.$bus.$emit('toStart', row.id)//往容器启动组件传值
            break;
        }
        // localStorage.setItem('stepsActive', this.stepsActive)
      }
    }
    console.log('我刷新');
    // 各子组件 通过eventBus 传过来的值----下一步
    this.$bus.$on('nextConfig', step => {
      console.log(step, 'step =======步数');
      this.stepsActive += step
      localStorage.setItem('stepsActive', this.stepsActive)

    })
    // 各子组件 通过eventBus 传过来的值----上一步
    this.$bus.$on('prevConfig', step => {
      console.log(step, 'step =======步数');
      this.stepsActive -= step
      localStorage.setItem('stepsActive', this.stepsActive)

    })
  },
  methods: {
  },
  destroyed() {
    localStorage.removeItem('containerShopRow')
    localStorage.removeItem('isInit')
    localStorage.removeItem('containerRow')
    localStorage.removeItem('stepsActive')
  },
  beforeDestroy() {
    this.$bus.$off('nextConfig')
    this.$bus.$off('prevConfig')
  },
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.deploy {
  padding: 10px;
  background-color: #fff;
  .header {
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    margin-bottom: 15px;
  }
}
</style>